import React, { ReactElement } from 'react';
import { Text, View, Image } from 'react-native';
import { timeout } from '../../constant/resource';
import Notch, { NotchType } from '../Notch';
import styles from './style';
import Button from '../Button';
import navigator from '../../util/navigator';
import { getRouteType, RouteType } from '../../config/route';
import { getScreenInfo, ScreenOrientation } from '../../util/screen';

interface Props {
  onReload: () => void;
}
export default function FetchFailed(props: Props): ReactElement {
  const { onReload } = props;
  const currentRoute = navigator.getCurrentRoute();
  const routeType = getRouteType(currentRoute.routeName);

  let screenOrientation = ScreenOrientation.Landscape;
  if (routeType === RouteType.Portrait) {
    screenOrientation = ScreenOrientation.Portrait;
  }
  const { width } = getScreenInfo({
    screenOrientation
  });
  return (
    <Notch
      style={[styles.container, { width }]}
      type={routeType === RouteType.LandScape ? NotchType.Left : NotchType.Top}
    >
      <View style={styles.load}>
        <Image source={timeout} style={styles.icon} />

        <Text style={styles.desc}>网络连接超时</Text>
        <Button
          style={styles.reLoad}
          onPress={onReload}
          text="重新加载"
          textStyle={styles.loadDesc}
        />
      </View>
    </Notch>
  );
}
